/**
 *
 * The MIT License
 *
 * Copyright (c) 2009 Noritaka Horio all rights reserved.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 * 
 * @author Noritaka Horio <holy.shared.design@gmail.com>
 * @see http://mootools.net - Javascript framework MooTools -
 * @see http://iddy.jp/ - Profile making service for blogger -
 * @license MIT License http://www.opensource.org/licenses/mit-license.php
 * @version 1.0.1
 *
 */

var Iddy;
if (!Iddy) Iddy = {};


/**
 * The profile using iddy api is displayed.
 * 
 * @author Noritaka Horio <holy.shared.design@gmail.com>
 * @version 1.0.1
 * @since version 1.0
 */
var Iddy = new Class({

	Implements: [Options],

	options: {
		"strategy": null,
		"url": "iddy.php",
		"width": "auto",
		"height": "auto",
		"zIndex": 99
	},

	loaded: false,
	showed: false,
	response: {
		"json": null,
		"text": null
	},

	initialize: function(options) {
		this.setOptions(options);
		this.strategy = (this.options.strategy) ? this.options.strategy : new Iddy.Default();
		this.container = new Element("div", {
			"class": "iddy"
		});
		this.container.inject(document.body);
		this.strategy.setContainer(this.container);
	},

	loadProfile: function() {
		if (!this.isLoaded()) {
			var request = new Request.JSON({
				"url": this.options.url, "method": "get"
			});
			request.addEvent("request", this.onRequest.bind(this));
			request.addEvent("success", this.onSuccess.bind(this));
			request.send();
		}
	},

	onRequest: function() {
		this.strategy.request();
		this.setEvents();
	},

	onSuccess: function(responseJSON, responseText) {
		this.response = {
			"json": responseJSON,
			"text": responseText
		};
		this.strategy.success(responseJSON, responseText);
		this.setEvents();

		this.container.setStyle("zIndex", this.options.zIndex);
		this.addOverlay();

		this.strategy.show();
		this.loaded = true;
	},

	addOverlay: function() {
		this.overlay = new Element("div", {
			"styles": {
				"position": "absolute",
				"height": "100%", "width": "100%",
				"left": 0, "top": 0,
				"zIndex": this.options.zIndex - 1,
				"opacity": 0.2,
				"background-color": "#000000"
			}
		});
		this.overlay.inject(document.body);
		this.overlay.addEvent("click", function() { 
			this.removeOverlay();
			this.hide();
		}.bind(this));
	},

	removeOverlay: function() {
		if (this.overlay) {
			this.overlay.dispose();
		}	
	},

	setEvents: function() {
		var iddyButton = $(this.container).getElement("a[href='" + this.strategy.iddyURL + "']");
		if (iddyButton) {
			iddyButton.addEvent("click", function(e) {
				e.stop();
				window.open(this.href);
			});
		}
		var detailButton = $(this.container).getElement("a.detail");
		if (detailButton) {
			detailButton.addEvent("click", function(e) {
				e.stop();
				window.open(this.href);
			});
		}

		var closeButton = $(this.container).getElement("a.close");
		if (closeButton) {
			closeButton.addEvent("click", function(){
				this.removeOverlay();
				this.container.fade("out");
			}.bind(this));
		}

		var buttons = $(this.container).getElements("img");
		buttons.each(function(img, key) {
			img.addEvents({
				"mouseover": function() {
					if (this.src.search(/.*_off(\.gif|\.jpg|\.png$)/) != -1) {
						this.src = this.src.replace(/off/, "on");
					}
				},
				"mouseout": function() {
					if (this.src.search(/.*_on(\.gif|\.jpg|\.png)$/) != -1) {
						this.src = this.src.replace(/on/, "off");
					}
				}
			});
		});
	},

	setStrategy: function(strategy) {
		this.container.set("html", "");
		this.container.setProperties({ "class": "iddy", "style": "" });
		this.container.setStyle("zIndex", this.options.zIndex);

		this.strategy = strategy;
		this.strategy.setContainer(this.container);
	},

	getStrategy: function() {
		return this.strategy;
	},

	isLoaded: function() {
		return this.loaded;
	},

	show: function() {
		this.loadProfile();
		if (this.isLoaded()) {
			this.strategy.success(this.response.json, this.response.text);
			this.setEvents();

			this.addOverlay();
			this.strategy.show();
		}
		this.showed = true;
	},

	hide: function() {
		this.strategy.hide();
	}
});



/**
 * Basic function of profile display
 * 
 * @author Noritaka Horio <holy.shared.design@gmail.com>
 * @version 1.0
 * @since version 1.0
 */
Iddy.Strategy = new Class({

	Implements: [Options],

	options: {
	},

	iddyURL: "http://iddy.jp",

	initialize: function(options) {
		this.setOptions(options);
		this.container = null;
	},

	getContainer: function() {
		return this.container;
	},

	setContainer: function(container) {
		this.container = container;
	},

	/**
	 * Override is possible.
	 */
	request: function() {
		this.container.set("html", "");
		this.container.addClass("request");

		var html = "";
		html += "<p class='loading'>loading...</p>";
		this.container.set("html", html);
	},

	/**
	 * Override is possible.
	 */
	success: function(){},

	/**
	 * Override is possible.
	 */
	failure: function() {
		this.container.set("html", "");
		var html = "";
		html += "<p class='failure'>failure</p>";
		this.container.set("html", html);
	},

	/**
	 * Override is possible.
	 */
	show: function() {
		var size = this.container.getSize();
		this.container.setStyles({
			"visibility": "visible",
			"opacity": 0,
			"margin-top": -Math.round(size.y / 2),
			"margin-left": -Math.round(size.x / 2)
		});
		this.container.fade("in");
	},

	/**
	 * Override is possible.
	 */
	hide: function() {
		this.container.fade("out");
	}

});


/**
 * Default mounting of profile display
 * 
 * @author Noritaka Horio <holy.shared.design@gmail.com>
 * @version 1.0
 * @since version 1.0
 */
Iddy.Default = new Class({

	Extends: Iddy.Strategy,

	options: {
	},

	initialize: function(options) {
		this.parent(options);
	},

	success: function(responseJSON, responseText) {

		var user = responseJSON.users[0];

		this.container.set("html", "");
		this.container.removeClass("request");
		this.container.addClass("loaded");

		var success = "";
		success += "<div class='header'><p class='title'>my profile</p></div>"
		success += "<div class='content'>";
		success += "    <div class='profile'>";
		success += "        <p class='photo'>";
		success += "            <a href='" + user.profileurl + " ' title='" + user.accountname + "'><img src='" + user.imageurl +"' /></a>";
		success += "        </p>";
		success += "        <p class='name'><strong>" + user.accountname + "</strong></p>";
		success += "        <dl>";
		success += "            <dt>profile</dt>";
		success += "            <dd>" + user.profile + "</dd>";
		success += "            <dt>email</dt>";
		success += "            <dd><a href='mailto:" + user.mail +"'>" + user.mail + "</a></dd>";
		success += "        </dl>";
		success += "    </div>";
		success += "</div>";
		success += "<div class='footer'>";
		success += "    <p class='control'>";
		success += "        <a title='show detail' class='detail' href='" + user.profileurl + "'>show detail</a>";
		success += "        <a title='close' class='close' href='#'>close</a>";
		success += "    </p>";
		success += "    <p class='poweredBy'>Powered by ";
		success += "        <a title='iddyへ' class='detail' href='" + this.iddyURL + "'>iddy.jp</a>";
		success += "    </p>";
		success += "</div>";

		this.container.set("html", success);
	}

});